<template>
  <div class="topTable">
    <main-table>
      <div class="left" slot="left">
        <div style="font-size: 20px; margin-bottom: 6px">歌曲表单</div>
        <span>{{ topList.trackCount }}首歌</span>
      </div>
      <div class="right" slot="right">
        播放：<span style="color: #c20c0c; font-weight: bold">{{
          topList.playCount
        }}</span
        >次
      </div>
      <!-- 表格 -->
      <div class="body" slot="body">
        <el-table
          :data="songList"
          style="width: 100%; border: 1px solid #d9d9d9"
          stripe
          :row-style="{ height: '30px' }"
          :cell-style="{ padding: '3.5px 0' }"
          lazy
        >
          <el-table-column label="" type="index"> </el-table-column>
          <!-- 标题 -->
          <el-table-column prop="date" label="标题" width="326px">
            <template v-slot="scope">
              <div style="display: flex; align-items: center">
                <el-image
                  v-if="scope.row.index < 3"
                  :src="scope.row.al1.picUrl"
                  alt=""
                  lazy
                  style="padding: 2px 2px"
                />

                <div class="playIcon" @click="play(scope.row.id)"></div>
                <div class="a">
                  <a href="javascript:;" @click="toSong(scope.row.id)">{{
                    scope.row.songName
                  }}</a>
                  <div
                    v-if="scope.row.alia.length !== 0"
                    style="color: #aeaeae; font-size: 12px; margin-left: 5px"
                  >
                    - ({{ scope.row.alia[0] }})
                  </div>
                  <div
                    v-if="scope.row.mv !== 0"
                    class="mv"
                    @click="mv(scope.row.mv)"
                  ></div>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- 时长 -->
          <el-table-column prop="time" label="时长" width="91px">
          </el-table-column>
          <!-- 歌手 -->
          <el-table-column prop="singer" label="歌手" width="192px">
            <template v-slot="scope">
              <a href="">{{ scope.row.singer }}</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main-table>
  </div>
</template>

<script>
import { getSongURL } from '@/api/api.js'
import mainTable from '../../../components/common/mainTable.vue'
export default {
  name: 'TopTable',
  components: { mainTable },
  data() {
    return {}
  },
  props: {
    topList: {
      type: Object,
      default() {
        return {}
      }
    },
    songList: {
      type: [],
      default() {
        return []
      }
    }
  },
  methods: {
    toSong(id) {
      this.$router.push({
        path: '/song',
        query: {
          id
        }
      })
    },
    // 点击mv
    async mv(mv) {
      this.$router.push({
        path: '/mv',
        query: {
          id: mv
        }
      })
      //
    },
    async play(id) {
      let songList = []
      const { data: res } = await getSongURL(id)
      songList.push(res[0].url)

      this.$store.commit('savaSongURL', [])
      this.$store.commit('savaSongURL', songList)
    }
  }
}
</script>

<style lang="scss" scoped>
a {
  font-size: 12px;
  color: #333;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

.topTable {
  padding: 0 40px;
  .left {
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
    }
  }
}
.el-image {
  display: block;
  width: 50px;
  height: 50px;
}
.playIcon,
.mv {
  background: url('https://s2.music.126.net/style/web2/img/table.png?f26edb29109ebe557a4e443cf2ffb8d9');
}

.playIcon {
  width: 17px;
  height: 17px;
  margin: 0 10px;

  background-position: 0 -103px;
  &:hover {
    background-position: 0 -128px;
    cursor: pointer;
  }
}
.a {
  display: flex;
  width: 219px;
  align-items: center;
  justify-content: flex-start;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
}
.mv {
  width: 23px;
  height: 17px;
  background-position: 0 -151px;
  margin-left: 2px;
  &:hover {
    cursor: pointer;
  }
}
</style>
